<template>
  <div id="app">
    <!-- 左边的菜单 -->
    <showMenu @listenShowMenu="listenShowMenu"></showMenu>
    <!-- 样式展示 -->
    <showStyle ref="domShowStyle"></showStyle>
    <!-- 简历展示 -->
    <showResume ref="domShowResume" :resumeData="resumeData"></showResume>
    <transition name="fade">
      <formList
        ref="comFormList"
        :resumeData="resumeData"
        v-if="formListShow"
        v-on:listenFormList="listenFormList"
      ></formList>
    </transition>
  </div>
</template>

<script>
import showMenu from "./components/menu/showMenu.vue";
import showStyle from "./components/showStyles/showStyles.vue";
import showResume from "./components/showResume/showResume.vue";
import formList from "./components/form/formList.vue";
import resumeData from "../static/resumedata.json";
import { str } from "./config/comstr";
export default {
  name: "App",
  components: { showMenu, showStyle, showResume, formList },
  data() {
    return {
      code: str.code,
      resumeData: resumeData,
      formListFlag: false,
      formListShow: false,
    };
  },
  created() {
    let n = 0;
    let _this = this;
    this.$nextTick(() => {
      {
        let length = _this.code.length;
        var setIn = setInterval(() => {
          //向子组件传递参数 ref已经绑定子组件的Dom元素
          _this.$refs.domShowStyle.writeStyleCode(_this.code.substring(0, n));
          _this.$refs.domShowResume.responseShowResume(
            _this.code.substring(0, n)
          );
          n++;
          if (n >= length) {
            clearInterval(setIn);
          }
        }, 10);
      }
    });
  },
  methods: {
    listenShowMenu(msg) {
      //点击显示填写自定义简历 显示默认信息
      if (msg == "fileClick") {
        this.formListShow = msg.showFlag;
        if (this.formListFlag) {
          this.resumeData.formFlag = true;
        }
      }
      if (msg.type == "choiceClick") {
        var resumeName =
          this.resumeData.head.intention + "-" + this.resumeData.head.name;
        var htmlcode = document.querySelector("#show-resume");
        htmlcode.style.width = msg.size.width + "px";
        htmlcode.style.height = msg.size.height + "px";
        html2canvas(htmlcode, {
          onrendered(canvas) {
            var imgData = canvas.toDataURL("image/png");
            var doc = new jsPDF();
            doc.addImage(imgData, "PNG", 10, 10);
            doc.save(resumeName + ".pdf");
          },
        });
      }
    },
    listenFormList(msg) {
      if (msg.type == "createResClick") {
        this.formListShow == msg.showFlag;
      }
      if (msg.type == "fromData") {
        this.resumeData = msg.fromData;
        this.formListFlag = true;
      }
    },
  },
};
</script>

<style>
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
  margin: 0;
  padding: 0;
}

input,
select,
textarea {
  font-size: 100%;
}

input {
  outline: none;
  border-style: none;
}

/* 去掉各 Table  cell 的边距并让其边重合 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 去除默认边框 */
fieldset,
img {
  border: 0;
}

/* 去掉 firefox 下此元素的边框 */
abbr,
acronym {
  border: 0;
  font-variant: normal;
}

/* 一致的 del 样式 */
del {
  text-decoration: line-through;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
  font-style: normal;
  font-weight: 500;
}

/* 去掉列表前的标识, li 会继承 */
ol,
ul {
  list-style: none;
}

/* 对齐是排版最重要的因素, 别让什么都居中 */
caption,
th {
  text-align: left;
}

a {
  text-decoration: none;
}

/*清除浮动代码*/
.clearfloat:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

.clearfloat {
  zoom: 1;
}

body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  min-width: 1024px;
  font-size: 62.5%;
}

#app {
  width: 100%;
  height: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>
